<template>
  <div class="flex direction-column height-100">
    <div class="search-form">
      <el-form inline>
        <el-form-item label="月份范围">
          <el-date-picker
            v-model="monthrange" type="monthrange" align="right"
            unlink-panels range-separator="至"
            start-placeholder="开始月份" end-placeholder="结束月份"
            format="yyyy-MM" value-format="yyyy-MM"
            :picker-options="pickerOptions">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="onSearch">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="columns-settings padding bg-white">
      <div class="columns-setting">
        <el-checkbox-group v-model="column1">
          <el-checkbox
            v-for="item in columnsSetting1" :key="item.prop"
            :label="item.prop"
          >
            {{ item.label }}
          </el-checkbox>
        </el-checkbox-group>
      </div>
      <div class="margin-top columns-setting">
        <el-checkbox-group v-model="column2">
          <el-checkbox
            v-for="item in columnsSetting2" :key="item.prop"
            :label="item.prop" :disabled="item.disabled"
          >
            {{ item.label }}
          </el-checkbox>
        </el-checkbox-group>
      </div>
    </div>
    <el-table
      v-loading="loading" ref="table"
      :data="lists.slice(pagination.pageSize * (pagination.pageNumber - 1), pagination.pageSize * pagination.pageNumber)"
      height="100%" style="width: 100%;"
      :header-cell-style="{
        backgroundColor: themeColor,
        color: 'white'
      }"
    >
      <el-table-column
        v-for="(parent, index) in columns" :key="index"
        v-bind="parent"
      >
        <template v-if="parent.children">
          <el-table-column
            v-for="(child, idx) in parent.children" :key="idx"
            v-bind="child"
          ></el-table-column>
        </template>
      </el-table-column>
    </el-table>
<!--    <el-pagination-->
<!--      class="pagination" layout="total,prev,pager,next"-->
<!--      hide-on-single-page background-->
<!--      :current-page.sync="pagination.pageNumber"-->
<!--      :page-size="pagination.pageSize" :total="pagination.total"-->
<!--    ></el-pagination>-->
  </div>
</template>

<script>
import getData from './data'

const columnsSetting1 = [
  {
    label: '综合能源消费量',
    prop: 'comprehensive'
  },
  {
    label: '煤炭消费量',
    prop: 'coal'
  },
  {
    label: '电力消费量',
    prop: 'electric'
  },
  {
    label: '电力产出量',
    prop: 'electricProduct'
  },
  {
    label: '万元工业产值综合能耗',
    prop: 'industryComprehensive'
  },
]

const columnsSetting2 = [
  {
    label: '本期',
    prop: 'currentPeriod',
    disabled: true
  },
  {
    label: '同期',
    prop: 'actualPeriod'
  },
  {
    label: '同比',
    prop: 'yearOnYear'
  },
  {
    label: '增长值',
    prop: 'growthValue'
  },
  {
    label: '占比',
    prop: 'proportion'
  },
]
export default {
  name: 'enterprise-energy-consumption-statistics',
  data () {
    const end = this.$dayjs(new Date()).format('YYYY-MM')
    const start = this.$dayjs(new Date(new Date().getFullYear(), 0)).format('YYYY-MM')
    return {
      monthrange: [start, end],
      column1: columnsSetting1.map((v, i) => i < 3 && v.prop),
      column2: columnsSetting2.map((v, i) => i < 3 && v.prop),
      columnsSetting1: columnsSetting1,
      columnsSetting2: columnsSetting2,
      pickerOptions: {
        shortcuts: [{
          text: '本月',
          onClick (picker) {
            picker.$emit('pick', [new Date(), new Date()])
          }
        }, {
          text: '今年至今',
          onClick (picker) {
            const end = new Date()
            const start = new Date(new Date().getFullYear(), 0)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近六个月',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setMonth(start.getMonth() - 6)
            picker.$emit('pick', [start, end])
          }
        }]
      },
      loading: false,
      lists: [],
      pagination: {
        pageNumber: 1,
        pageSize: 13,
        total: 0
      }
    }
  },
  computed: {
    themeColor () {
      return this.$store.state.user.theme
    },
    qs () {
      const monthrange = this.monthrange
      return {
        start: monthrange[0],
        end: monthrange[1]
      }
    },
    columns () {
      const {
        columnsSetting1,
        columnsSetting2,
        column1,
        column2
      } = this
      const result = []
      columnsSetting1.forEach(v => {
        const obj = {
          ...v,
          align: 'center',
          children: []
        }
        columnsSetting2.forEach(vv => {
          let key = v.prop
          const prop = vv.prop
          if (column2.includes(prop)) {
            key += (prop.charAt(0).toUpperCase() + prop.substring(1))
            obj.children.push({
              label: vv.label,
              prop: key,
              align: 'center'
            })
          }
        })
        if (column1.includes(v.prop)) {
          result.push(obj)
        }
      })
      return result
    }
  },
  mounted () {
    this.getLists()
  },
  methods: {
    getLists () {
      this.loading = true
      // TODO
      return new Promise((resolve) => {
        setTimeout(() => {
          this.loading = false
          resolve()
          this.lists = getData(1000)
          this.pagination.total = 1000
        }, 200)
      })
    },
    onSearch () {
      this.pagination.pageNumber = 1
      this.$nextTick(() => {
        this.getLists()
      })
    },
  }
}
</script>

<style lang="scss" scoped>

</style>
